<template>
    <v-md-editor @upload-image="handleUploadImage" :disabled-menus="[]"></v-md-editor>
</template>

<script>
export default {
    name:"myMdEditor",
    props: {
        url: {
            type: String,
            required: true
        }
    },
    data() {
    },
    methods: {
        handleUploadImage(event, insertImage, files) {
            if (!this.url) {
                this.$message.error("必须传入文件上传途径")
                return
            }
            try {
                let formData = new FormData();
                // 遍历当前临时文件List,将上传文件添加到FormData对象中
                files.forEach((item) => formData.append('file', item));

                // 调用后端接口,发送请求
                this.$axios.post(this.url, formData, {
                    // 因为我们上传了图片,因此需要单独执行请求头的Content-Type
                    headers: {
                        // 表示上传的是文件,而不是普通的表单数据
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(({ data }) => {
                    if (data.code == 0) {
                        let fileMaps = data.originNames
                        let keys = Object.keys(fileMaps)
                        if (keys.length > 0) {
                            for (let index in keys) {
                                let key = keys[index]
                                let values = fileMaps[key]
                                // 此处只做示例
                                insertImage({
                                    url: values,
                                    desc: key,
                                    // width: 'auto',
                                    // height: 'auto',
                                });
                            }
                        }
                    }
                }).catch((err) => {
                    console.log(err, 'err');
                    this.$message.error("上传失败，请重试或者使用网络地址")
                })
            } catch (error) {
                console.log(error);
                this.$message.error("上传失败，请重试或者使用网络地址")
            }
        },
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>